<!DOCTYPE html>
<html lang="en">
<head>
    <script src="data.js" charset="utf-8"></script>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <style>
        @media screen and (max-width:321px){
            body{font-size:14px !important}
        }
        @media screen and (min-width:321px) and (max-width:400px){
            body{font-size:16px !important}
        }
        @media screen and (min-width:400px){
            body{font-size:18px !important}
        }
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            border:0;
        }
        .clearfix:after{
            display:table;
            clear:both;
            content: "";
        }
    .fl{
            float:left;
        }
        html,body{
            height:100%;
        }
        .top{
            height:1.3rem;
            min-height:1.2rem;
            background:white;
        }
        .img img{
            width:0.8rem;
            margin-top:0.08rem;

        }
        .sandian img{
            width:0.8rem;
            float: right;
            margin-right:0.3rem;
            margin-top:-0.8rem;
        }
        .ssk{
            width:6.9rem;
            height:0.8rem;
            margin:0.4rem auto;
            background:#f7f7f7;
            border-radius:0.5rem;
            vertical-align: middle;
        }
        .ssk input{
            width:5.3rem;
            margin-left:0.1rem;
            margin-top:0.06rem;
            padding:0.08rem;
            background:#f7f7f7;
        }
        .tubiao{
            width:0.6rem;
            height:0.6rem;
            background:url("images/jd-sprites.png")2.1rem 0;
            background-size:5.3rem;
            display:inline-block;
            margin-top:0.16rem;
            margin-left:10px;
        }
        .bottom{
            position:fixed;
            bottom:0px;
            left:0px;
            right:0px;
            width:100%;
            height:1.3rem;
            background:#ccc;
        }
        .bottom img{
            width:1.87rem;
        }
        .cnt{
            height:15.3rem;
        }
        .cnt .sub_nav{
            width:2rem;
            height:100%;
            background:#f8f8f8;
            overflow-y:auto;
        }
        .cnt .cat_list{
            overflow-y:auto;
            font-size:0.32rem;
        }
        .sub_nav>div{
            height:1.1rem;
            line-height:1.1rem;
            text-align:center;
        }
        .div_active{
            background:white;
            color:red;
        }
        .cnt .cat_list{
            width:7.97rem;
            height:100%;
            background:white;
        }
        .cat{
            margin-left:0.22rem;
            margin-bottom:0.22rem;

        }
        .smallcatList{
            margin:0.5rem auto;
        }
        .biaoti{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="top clearfix">
        <div class="img fl"><img src="images/jiantou.png" /></div>
        <div class="ssk"><span class="tubiao fl"></span><input class="fl" placeholder="笔记本" /></div>
        <div class="sandian fr"><img src="images/sandian.png" /></div>
    </div>
    <div class="cnt clearfix">
        <div class="sub_nav fl" id="leftnav"></div>
        <div class="cat_list fl" id="cat_list"></div>
    </div>
    <div class="bottom">
        <img src="images/1.png" />
        <img src="images/2.png" />
        <img src="images/3.png" />
        <img src="images/4.png" />
        <img src="images/5.png" />
    </div>
</div>
<script>
    console.log(data);
    var arrs = data.json.keywordAreas;
    for(var i = 0; i<arrs.length; i ++){
        var a = arrs[i];
        var navLi = document.createElement("div");
        navLi.index = i;
        navLi.onclick = function () {
            loadCatData(this.index);
            clearNavLiClassName();
            this.className = "div_active";
        };
        if(i==0){
            navLi.className = "div_active";
        }
        navLi.innerHTML = a.areaName;
        leftnav.appendChild(navLi);
    }
    function clearNavLiClassName(){
        var divs = leftnav.getElementsByTagName("div");
        for(var i = 0;i<divs.length;i++){
            divs[i].className = "";
        }
    }

    loadCatData(0);

    function loadCatData(num){
        cat_list.innerHTML = "";
        var arrs2 = arrs[num].level1words;
        for(var j = 0;j<arrs2.length;j++){
            var a2 = arrs2[j];
            var navLi = document.createElement("div");
            navLi.innerHTML = a2.keyword;
            navLi.style.fontWeight = "400";
            navLi.style.fontSize = "16px";
            cat_list.appendChild(navLi);

            var smallcatList = document.createElement("div");
            smallcatList.className = "smallcatList clearfix";
            var arrs3 = a2.level2words;
            for(var k = 0;k<arrs3.length;k++){
                var a3 = arrs3[k];

                var catDiv = document.createElement("div");
                catDiv.className = "cat fl";

                catDiv.style.width = "30%";
                var imageDiv = document.createElement("img");
                imageDiv.src = "http:"+a3.imageUrl;
                imageDiv.style.width = "100%";
                var txtDiv = document.createElement("div");
                txtDiv.innerHTML = a3.keyword;
                txtDiv.className = "biaoti";

                txtDiv.onclick = function () {
                    location = 'http://so.m.jd.com/ware/search.action?keyword='+this.innerHTML+'&searchFrom=catgory';
                };
                catDiv.appendChild(imageDiv);
                catDiv.appendChild(txtDiv);
                smallcatList.appendChild(catDiv);
            }
            cat_list.appendChild(smallcatList);
        }
    }
</script>
</body>
</html>